<template>
  <section class="c-w100 c-pv24 c-bg-white c-contextX-scroll c-flex-row c-bd-b1 c-fs24">
    <div v-for="(prodItem,prodIndex) in couponList" :key="prodIndex" @click="goDetail(prodItem.goodsId)">
      <div class="couponStyle c-p c-mr12" v-if="prodItem.type == 1">
        <div class="exchange-left c-ph16 c-w100 c-flex-row c-justify-sb c-aligni-center">
          <div class="c-fs34 c-fc-white c-w100 c-textAlign-c">兑换券</div>
        </div>
        <div class="c-fc-sblack c-hh50 c-lh50 c-text-ellipsis1">{{prodItem.name}}</div>
      </div>
      <div class="couponStyle c-p c-mr20" v-else-if="prodItem.type == 4">
        <div class="coupon-bg c-ph16 c-w100 c-flex-row c-justify-sb c-aligni-center">
          <div class="c-fs34 c-fc-white c-w100 c-textAlign-c">抵价券</div>
        </div>
        <div class="c-fs20 c-fc-sblack c-hh50 c-lh50 c-text-ellipsis1">适用于预约师资功能</div>
      </div>
      <div class="couponStyle c-mr20" v-else>
        <div class="coupon-bg c-w100 c-flex-row c-aligni-center c-p">
          <div class="c-fc-white c-flex-column c-w100 c-textAlign-c">
            <div v-if="prodItem.type == 5" class="c-fs42 c-fw-b">{{Number(prodItem.price)}}<span class="c-fs20">折</span></div>
            <div v-else class="c-fs42 c-fw-b"><span class="c-fs22">{{'￥' | iosPriceFilter}}</span>{{Number(prodItem.price)}}<span class="c-fs20">元</span></div>
            <div class="c-fs18 c-pt10">{{Number(prodItem.amount) > 0 ? '满'+Number(prodItem.amount)+'元可用' : '无使用门槛'}}</div>
          </div>
        </div>
        <div class="c-fc-sblack c-hh50 c-lh50 c-text-ellipsis1">{{prodItem.name}}</div>
      </div>
      <div class="theme-fc c-text-ellipsis1">{{prodItem.usePoints}}{{ customPointName }}</div>
    </div>
  </section>
</template>
<script>
import { appRouterChange } from "@/mixin/appRouterPush.js";
export default {
  name: "ExchangeCoupons",
  mixins: [appRouterChange],
  components: {},
  props: {
    couponList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"),
    };
  },
  methods: {
    goDetail(goodsId) {
      this.$emit("goodCouponsDetail", goodsId)
    }
  },
};
</script>

<style scoped>
.couponStyle {
  width: 4.7rem;
}
.coupon-bg {
  background: url("../../../public/i/wap/memberIndex/goodCouponsBg.png")
    no-repeat;
  background-size: 100%;
  height: 2.75rem;
}
.exchange-left {
  background: url("../../../public/i/wap/memberIndex/exchange.png") no-repeat;
  background-size: 100% 100%;
  height: 2.75rem;
}
</style>